{% block content %}

<h2>KhusKa bug tracking system</h2>
<div>
    <p>KhusKa is a collaborative bug tracking system, built for teams who want to work together.</>
</div>


<div class="form_container">
    {% for project in projects %}
    <div class="project_container clear_both">
        <div class="clear_both">
        <h2><a href="/iterations?project_id={{ project.key.id }}" class="prj_link"> {{ project.name|escape }}</a></h2>
            <span>Description: {{ project.description }}</span>
        </div>
        <div>
        <div id="id_tool_tip_{{ project.key.id }}" class="tool_tip">
            <span class="person">{{user.nickname}}</span>
            <span class="u_sta" id="{{ project.key.id }}">{{ project.user_status }}</span>
            <span class="link" id="id_join_{{ project.key.id }}" val="{{ project.key.id }}">Join to this project</span>
        </div>
        </div>
    </div>
    
    {% endfor %}
</div>

<script type="text/javascript">
    $(document).ready(function(){
        $(function() {
            $("input:submit, button" ).button();
        });
        updateStatus = function(id, value) {
            if ( value == 'no_request') {
                $( '#id_join_' + id ).removeClass("hide");
                $( '#' + id ).addClass("hide");
                
            } else {
                $( '#' + id ).text(value);
                $( '#' + id ).removeClass("hide");
                $( '#id_join_' + id ).addClass("hide");
            }
        };
        $.each($( 'span:[class=u_sta]' ), function(index, value) {
            updateStatus($(value).attr('id'), $(value).text());
        });
        updateToolTip = function (toolTip) {
            toolTip.addClass( "ui-state-highlight" );
            setTimeout(function() {
                toolTip.removeClass( "ui-state-highlight", 1500 );
            }, 5500 );
        };
        $('span:[id^=id_join_]').click(function(event) {
            event.preventDefault();
            var id_project = $( this ).attr("val");
            var url = '/signup';
            $.ajax({
                type: 'POST',
                url: url,
                dataType: 'json',
                data: {'id_project': id_project},
                success: function(data) {
                    var msg = 'Your request has been sent, we will let you know when you are accpeted. Your current status is ' + data.status;
                    updateStatus(data.id_project, msg);
                    updateToolTip( $( '#id_tool_tip_' + data.id_project) );
                }
            });
        });

        $( 'a.prj_link' ).click( function( event ) {
            event.preventDefault();
            var url = $( this ).attr('href');
            loadContent( url );
        });
        
    });
</script>

{% endblock %}